
<template>
    <div class="login">
      <Myhead title="登录"></Myhead>
      <div class="forms">
      <van-form @submit="onSubmit" @failed="onFail">
        <van-cell-group inset>
          <van-field
          clearable
          v-model="form.loginname"
          name="loginname"
          label="账号"
          placeholder="账户名/手机号/邮箱"
          left-icon = 'friends-o'
          :rules="[{required: true,message:'请填写账号'}]"
          ></van-field>
          <van-field
          clearable
          v-model="form.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          left-icon="closed-eye"
          :rules="[{required:true,message:'请填写密码'}]"
          >            
          </van-field>
        </van-cell-group>
        <div style="margin:16px">
          <van-button block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
        <div class="licks" style="margin: 16px;">
          <router-link to="/reg" class="aitem">注册账号</router-link>
        </div>
      </van-form>
    </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { showToast } from 'vant';
import { todoLogin } from '../api/api'
import {useRoute} from 'vue-router'
import { useCommonHook } from '../hooks';

const route = useRoute()
const{
  gotopage
}=useCommonHook()

const form = ref({
  username:'',
  password:''
})
// 请求成功
const onSubmit = async (value) =>{
  console.log(value);

  let res = await todoLogin(value)
  if(res.code==200){
    showToast('登录成功')
    gotopage('/index/mine')
    localStorage.setItem('userid',res.data.userid)
    localStorage.setItem('token',res.data.token)
  }else{
    showToast(res.message)
  }
}


const onFail = ()=>{
  showToast('提交失败')
}

onMounted(()=>{
  console.log(route);
  if(route.query){
    form.value.loginname = route.query.tel // 路由参数
  }
})
</script>

<style lang="scss" scoped>
.login{
    height:100%;
    overflow: hidden;
}
.forms{
    padding:20px 5px;
}

.links{
    font-size: 14px;
    
    .aitem{
        color:#f50;
    }
}
</style>